<template>
  <body class="pintro">
    <el-container class="container">
      <el-aside width="15%" class="frame">
        <el-menu
          style="height: 100%"
          default-active="2"
          class="el-menu-vertical-demo menu">
          <el-menu-item index="1" style="margin-bottom: 50px">
            <i class="el-icon-back back_btn" @click="back()"></i>
          </el-menu-item>
          <el-menu-item index="2" style="margin-bottom: 50px" @click="show(1)">
            <i class="el-icon-setting"></i>
            <span slot="title">工作流程</span>
          </el-menu-item>
          <el-menu-item index="3" style="margin-bottom: 50px" @click="show(2)">
            <i class="el-icon-setting"></i>
            <span slot="title">岗位职责</span>
          </el-menu-item>
          <el-menu-item index="4" style="margin-bottom: 50px" @click="show(3)">
            <i class="el-icon-setting"></i>
            <span slot="title">工作内容</span>
          </el-menu-item>
        </el-menu>
      </el-aside>
      <el-container>
        <el-header height="15%">
          <h1 style="font-family: 宋体; font-size: 35px">
            虚拟宠物医院学习平台|{{ roleName }}
          </h1>
        </el-header>
        <el-main>
          <div class="mainbox">
            <div v-if="roleName === '前台'" class="">
              <!-- 面板一 -->
              <div class="one" v-show="index === 1">
                <img
                  src="../assets/前台.jpg"
                  style="width: 90%; height: 100%" />
              </div>
              <!-- 面板二 -->
              <div class="two" v-show="index === 2">
                <el-table
                  :data="frontData"
                  border
                  stripe
                  max-height="550"
                  style="width: 100%">
                  <el-table-column prop="office" label="科室" width="180">
                  </el-table-column>
                  <el-table-column prop="func" label="功能" width="180">
                  </el-table-column>
                  <el-table-column prop="person" label="主要责任人">
                  </el-table-column>
                </el-table>
              </div>
              <!-- 面板三 -->
              <div class="three" v-show="index === 3">
                <el-table
                  :data="frontcontentData"
                  border
                  stripe
                  max-height="550"
                  style="width: 100%">
                  <el-table-column prop="flow" label="流程" width="180">
                  </el-table-column>
                  <el-table-column prop="content" label="具体内容" width="180">
                  </el-table-column>
                  <el-table-column prop="department" label="部门">
                  </el-table-column>
                </el-table>
              </div>
            </div>
            <div v-else-if="roleName === '医助'">
              <!-- 面板一 -->
              <div class="one" v-show="index === 1">
                <img
                  src="../assets/医助.jpg"
                  style="width: 90%; height: 100%" />
              </div>
              <!-- 面板二 -->
              <div class="two" v-show="index === 2">
                <el-table
                  :data="assitData"
                  border
                  stripe
                  max-height="550"
                  style="width: 100%">
                  <el-table-column prop="office" label="科室" width="180">
                  </el-table-column>
                  <el-table-column prop="func" label="功能" width="180">
                  </el-table-column>
                  <el-table-column prop="person" label="主要责任人">
                  </el-table-column>
                </el-table>
              </div>
              <!-- 面板三 -->
              <div class="three" v-show="index === 3">
                <el-table
                  :data="assitcontentData"
                  border
                  stripe
                  max-height="550"
                  style="width: 100%">
                  <el-table-column prop="flow" label="流程" width="180">
                  </el-table-column>
                  <el-table-column prop="content" label="具体内容" width="180">
                  </el-table-column>
                  <el-table-column prop="department" label="部门">
                  </el-table-column>
                </el-table>
              </div>
            </div>
            <div v-else-if="roleName === '兽医师'">
              <!-- 面板一 -->
              <div class="one" v-show="index === 1">
                <img
                  src="../assets/兽医.jpg"
                  style="width: 90%; height: 100%; overflow: auto" />
              </div>
              <!-- 面板二 -->
              <div class="two" v-show="index === 2">
                <el-table
                  :data="veterData"
                  border
                  stripe
                  max-height="550"
                  style="width: 100%">
                  <el-table-column prop="office" label="科室" width="180">
                  </el-table-column>
                  <el-table-column prop="func" label="功能" width="180">
                  </el-table-column>
                  <el-table-column prop="person" label="主要责任人">
                  </el-table-column>
                </el-table>
              </div>
              <!-- 面板三 -->
              <div class="three" v-show="index === 3">
                <el-table
                  :data="vetercontentData"
                  border
                  stripe
                  max-height="550"
                  style="width: 100%">
                  <el-table-column prop="flow" label="流程" width="180">
                  </el-table-column>
                  <el-table-column prop="content" label="具体内容" width="180">
                  </el-table-column>
                  <el-table-column prop="department" label="部门">
                  </el-table-column>
                </el-table>
              </div>
            </div>
          </div>
        </el-main>
      </el-container>
    </el-container>
  </body>
</template>
<script>
export default {
  name: 'roleintro',
  data() {
    return {
      roleName: '',
      index: 1,
      frontData: [
        {
          office: '前台',
          func: '包括接待挂号、导医咨询、病历档案发出与回收、收费等。',
          person: '前台',
        },
        {
          office: '档案室',
          func: '包括病例档案的合理保存与数据统计等。',
          person: '前台',
        },
      ],
      assitData: [
        {
          office: '免疫室',
          func: '包括为健康宠物接种疫苗的流程，对常见并发症的处理流程，对常见免疫相关问题的解答等',
          person: '助理执业兽医师',
        },
        {
          office: '化验室',
          func: '包括对送检样本的预处理，对相应样本进行血常规、血液生化、电解质、血气、血凝指标、激素指标、尿常规、微生物学检查、药敏、皮肤刮片、粪便检查、传染病检查等检查操作流程。',
          person: '助理执业兽医师',
        },
        {
          office: '影像室',
          func: '包括X线检查、B超检查以及CT、MRI检查。如X线检查：X光机的结构功能介绍、全身各部位的摆位、拍摄条件的选择、拍摄流程、洗片的操作流程。B超检查：扫查探头的选择、全身各个部位扫查的摆位、腹部扫查流程。',
          person: '助理执业兽医师',
        },
        {
          office: '处置室',
          func: '包括口服投药、换药、清洗耳道、挤肛门腺、修剪指甲、鼻饲管放置、灌肠、安乐死等基本处置操作流程。',
          person: '助理执业兽医师',
        },
        {
          office: '药房',
          func: '包括对各种药物的存放要求、处方的审核流程、药物的发放流程、常见药物的使用说明等。',
          person: '助理执业兽医师',
        },
        {
          office: '注射室',
          func: '包括静脉注射、皮下注射、肌肉注射、局部封闭注射的操作流程，常见问题的处理方法，输液泵、加热垫的使用方法，注射室的消毒流程。',
          person: '助理执业兽医师',
        },
        {
          office: '手术准备室',
          func: '包括术前对宠物进行麻前给药、注射麻醉、吸入麻醉的流程，保定、剃毛、消毒的流程，常见手术器械的介绍，手术器械包的准备、灭菌流程，手术人员的消毒、穿戴手术衣流程等。',
          person: '助理执业兽医师',
        },
        {
          office: '住院部',
          func: '包括对需要住院的病例进行护理分级，不同护理级别的要求，住院部的工作流程，住院部的消毒流程等。',
          person: '住院执业兽医师或助理执业兽医师',
        },
      ],
      veterData: [
        {
          office: '诊室',
          func: '包括诊室的布局介绍；对宠物进行临床基本检查（视、听、触、嗅等）、疾病诊断；与宠物主人交流并根据情况开具处方。',
          person: '执业兽医师',
        },
        {
          office: '专科检查室',
          func: '包括对眼科、骨科、神经科、心脏科等专科疾病的检查，如眼科（检眼镜检查、眼压检查、裂隙灯检查、眼底检查、泪液分泌量检查等）、心脏科检查（心脏听诊、心电图检查等）、神经学检查（步态检查、各种反射检查等）等。',
          person: '执业兽医师',
        },
        {
          office: '手术室',
          func: '包括手术室的布局介绍，手术室消毒流程，手术无菌要求，常规手术、特殊手等的操作规范。',
          person: '执业兽医师',
        },
        {
          office: '病理解剖室',
          func: '包括对病死动物剖解的流程，病理剖检室的消毒流程，病历剖检过程的人员要求，病理剖检过程中的人道关怀。',
          person: '执业兽医师',
        },
      ],
      frontcontentData: [
        { flow: '接待客户', content: '接待宠物主人和宠物', department: '前台' },
        {
          flow: '病历记录',
          content: '前台接待员登记宠物主人信息和宠物信息，查询病历记录',
          department: '前台',
        },
        {
          flow: '医疗服务安排',
          content:
            '前台接待员为需要看病的宠物进行挂号， 挂号信息流转到诊室，医生初步诊断并制定治疗计划。',
          department: '前台',
        },
        {
          flow: '解答客户疑问',
          content: '前台接待员和宠物主人确认治疗计划，并解答疑问。',
          department: '前台',
        },
        {
          flow: '收取费用',
          content: '前台接待员收取治疗费用和药品费用。',
          department: '前台',
        },
        {
          flow: '发放药物和医嘱',
          content:
            '前台接待员给宠物主人发放药物和医嘱，宠物主人离开医院，完成前台服务流程。',
          department: '前台',
        },
      ],
      assitcontentData: [
        {
          flow: '接待患者',
          content: '医疗助手接待患者及其主人，了解患者的基本信息和就诊目的。',
          department: '医助',
        },
        {
          flow: '登记信息',
          content: '医疗助手登记患者的基本信息，包括姓名、宠物种类、年龄等。',
          department: '医助',
        },
        {
          flow: '了解主诉',
          content: '医疗助手询问患者主人关于宠物的症状和问题，了解主诉。',
          department: '医助',
        },
        {
          flow: '安排就诊',
          content: '医疗助手根据患者的症状和情况，安排宠物的就诊时间和医生。',
          department: '医助',
        },
        {
          flow: '辅助检查',
          content:
            '根据医生的要求，医疗助手协助进行辅助检查，如采集血液样本、尿液样本等。',
          department: '医助',
        },
        {
          flow: '处理医嘱',
          content: '医疗助手负责收集医生的医嘱，如开具处方等',
          department: '医助',
        },
      ],
      vetercontentData: [
        {
          flow: '接诊患者',
          content: '接待患者及其主人，了解患者的病史和主诉。 ',
          department: '兽医师',
        },
        {
          flow: '检查宠物',
          content:
            '对患者进行体格检查，包括测量体温、观察呼吸和心率等；详细记录患者的病史，包括疫苗接种情况、饮食习惯、行为问题等；根据体格检查和病史记录，制定诊断和治疗计划。',
          department: '兽医师',
        },
        {
          flow: '诊断疾病',
          content:
            '根据治疗计划，进行相应的治疗，如给药、注射，根据需要，进行实验室检验、X光检查或其他影像学检查等，进行确诊。',
          department: '兽医师',
        },
        {
          flow: '执行手术',
          content:
            '兽医负责进行手术操作，包括手术准备、消毒、局部麻醉或全身麻醉的施行，手术器械的选择和使用等。他们需要熟悉各种手术技术和操作步骤，并确保手术过程安全有效。同时，兽医在手术过程中需要监测动物的生命体征，如心率、呼吸、体温等。他们需要根据监测结果做出相应的调整和判断，确保动物的生命体征稳定。 ',
          department: '兽医师',
        },
        {
          flow: '指导助理工作',
          content:
            '兽医指导助理进行诊断和治疗动物的基本操作，如体温测量、注射、包扎伤口等。他们还可以教助理了解并应用药物，为动物提供基本的护理和喂养，以及协助进行实验室检测和影像学检查。此外，兽医还可以指导助理协助处理动物的日常事务，如记录病历、拍摄X射线等。',
          department: '兽医师',
        },
        {
          flow: '看护住院部',
          content:
            '负责对入院的动物进行日常护理工作，包括喂食、清洁、控制感染等。他们需要监测动物的体温、脉搏、呼吸等生命体征，并提供必要的医疗护理，如包扎伤口、更换敷料等。',
          department: '兽医师',
        },
        {
          flow: '管理药品库存',
          content:
            '兽医需要定期检查和管理药品库存，确保库存量充足，以满足医疗机构的需求。需要制定合理的库存管理策略，参考药品的使用频率和保质期等因素。同时，记录药品的入库和出库信息，包括药品的名称、规格、批号、数量等。他们需要保持准确的记录，并及时更新和归档相关文件，以便于追溯和管理。',
          department: '兽医师',
        },
      ],
    }
  },
  created() {
    this.roleName = this.$route.query.role || '' // 获取查询参数中的role值，如果不存在则默认为空字符串
    // 根据roleName初始化页面或发起请求获取数据等
  },
  methods: {
    show(value) {
      this.index = value
    },
    back() {
      this.$router.push({ path: '/role' })
    },
  },
}
</script>
<style scoped>
.container {
  width: 100%;
  height: 100%;
  text-align: center;
}

.pintro {
  background-image: url('../assets/左边一只黑狗.png');
  background-size: 100% 100%;
}

.frame {
  background-color: rgba(255, 255, 255, 0.6);
}

.mainbox {
  background-color: rgba(255, 255, 255);
  border-radius: 25px;
  width: 100%;
  height: 100%;
}

.el-row {
  padding: 50px;
}

.one {
  height: 550px;
}

.two {
  height: 550px;
}

.three {
  height: 550px;
}

.back_btn {
  float: left;
  font-size: 35px;
}

::v-deep .el-menu {
  background-color: transparent;
}
</style>
